import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { LaptopOutlined, UserOutlined } from "@ant-design/icons";
import { useLocation } from 'react-router';
import { ClientContext } from "../../App";
import type { MenuProps } from "antd";
import { Layout, Menu } from "antd";
const { Sider } = Layout;

const memu = [
  { name: "info", route: "info" },
  { name: "record", route: "record" },
];
const items2: MenuProps["items"] = [UserOutlined, LaptopOutlined].map(
  (icon, index) => {

    return {
      key: `${memu[index].route}`,
      icon: React.createElement(icon),
      label: `${memu[index].name}`,
    };
  }
);

export const Side: React.FC = () => {
  const { theme } = useContext(ClientContext);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();

  const click = ({ key }: any) => {
    navigate(key, { replace: true });
  };

  const location = useLocation();
  const { pathname } = location;
  // 查找 pathname 中的最后一个 / 之后的内容
  const index = pathname.lastIndexOf('/');
  return (
    <Sider
      style={{
        background: colorBgContainer,
        overflow: "auto",
        height: "auto",
        position: "relative",
      }}
      width={200}
    >
      <Menu
        mode="inline"
        defaultSelectedKeys={[pathname.substring(index + 1)]}
        style={{ height: "100%" ,fontSize:'18px'}}
        items={items2}
        onClick={click}
      />
    </Sider>
  );
};
